<!-- 法律法规 -->
<template>
  <div class="laws">
    <div class="search-wrap">
      <a-row
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-50 text-align-right">标题</span>
          <a-input
            placeholder="请输入标题"
            style="width:260px"
            v-model="queryParam.search"
          />
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-50 text-align-right">适用</span>
          <a-select
            style="width:260px"
            placeholder="请选择适用范围"
            v-model="queryParam.applicableType"
          >
            <a-select-option
              v-for="item in APPLICABLETYPE"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-50 text-align-right">类别</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择类别"
            v-model="queryParam.type"
          >
            <a-select-option
              v-for="item in LAWTYPE"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row
        class="m-t-26"
        type="flex"
        justify="space-between"
      >
        <a-col :span="7">
          <a-button
            type="primary"
            @click="createLaw"
          >
            新建
          </a-button>
        </a-col>
        <a-col :span="7"></a-col>
        <a-col :span="7">
          <a-button
            class="m-r-30 m-l-30"
            type="primary"
            @click="onSearch"
          >
            检索
          </a-button>
          <a-button @click="reset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-wrap m-t-30">
      <template>
        <s-table
          ref="sTable"
          size="default"
          :rowKey="record => record.id"
          :columns="columns"
          :data="loadData"
        >
          <span
            slot="subtitle"
            slot-scope="text"
          >
            <span v-if="$filters.textWidth(text) > 400">
              <a-tooltip
                placement="top"
                :title="text"
              >
                <span style="cursor: pointer;width: 400px; display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  {{text}}
                </span>
              </a-tooltip>
            </span>
            <span v-else>{{text}}</span>
          </span>
          <span
            slot="action"
            slot-scope="text, record"
          >
            <a @click="edit(record.id)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteLaw(record.id)"
            >
              <template slot="title">
                <span>您确定删除么？</span>
              </template>
              <a>删除</a>
            </a-popconfirm>
          </span>
        </s-table>
      </template>
    </div>
    <a-modal
      width="900px"
      :title="title"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <div class="section">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item
            label="标题"
            prop="title"
          >
            <a-input
              v-model="form.title"
              placeholder="≤100位有效字符"
            />
          </a-form-model-item>
          <a-form-model-item
            label="适用"
            prop="applicableType"
          >
            <a-select
              v-model="form.applicableType"
              placeholder="请选择适用"
            >
              <a-select-option
                v-for="item in APPLICABLETYPE"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            label="类别"
            prop="type"
          >
            <a-select
              v-model="form.type"
              placeholder="请选择类别"
            >
              <a-select-option
                v-for="item in LAWTYPE"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            label="添加时间"
            prop="createTime"
          >
            <a-date-picker
              v-model="form.createTime"
              style="width:100%;"
              valueFormat="YYYY-MM-DD"
            />
          </a-form-model-item>
          <div
            class="chapter-item m-b-16"
            :class="{'isDown':chapter.isDown}"
            v-for="(chapter,i) in form.lawChapterList"
            :key="chapter.id"
          >
            <a-form-model-item
              :label="`章节标题${i+1}`"
              :prop="`lawChapterList[${i}].title`"
            >
              <a-input
                v-model="chapter.title"
                placeholder="≤25位有效字符"
              />
              <span
                class="down"
                @click="chapter.isDown = !chapter.isDown"
              >
               <a-icon type="up-circle" v-if="chapter.isDown"/>
                <a-icon type="down-circle"  v-else/>
              </span>
              <span
                class="minus"
                @click="deleteChapter(i)"
              >
                <a-icon type="minus-circle" />
              </span>
            </a-form-model-item>
            <a-form-model-item
              label="文本"
              :prop="`lawChapterList[${i}].content`"
            >
              <editor-bar
                v-model="chapter.content"
                :isClear="isClear"
              ></editor-bar>
            </a-form-model-item>
          </div>
          <a-form-model-item label="">
            <a-button
              type="primary"
              @click="addChapter"
            >
              新增章节文本
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
import EditorBar from '@/components/wangEnduit'
import { v4 as uuidv4 } from "uuid";
import { LAWTYPE, APPLICABLETYPE } from "@/utils";
const columns = [
  {
    title: "序号",
    dataIndex: "sort",
    key: "sort"
  },
  {
    title: "标题",
    key: "title",
    dataIndex: "title",
    scopedSlots: { customRender: "subtitle" }
  },
  {
    title: "适用",
    dataIndex: "applicableType",
    key: "applicableType",
    customRender: (text, row, index) => {
      // 适用类型 1专利 2商标
      let value = "";
      if (text === 1) value = "专利";
      if (text === 2) value = "商标";
      return {
        children: value,
        attrs: {}
      };
    }
  },
  {
    title: "类别",
    key: "type",
    dataIndex: "type",
    customRender: (text, row, index) => {
      // 类别 1法律 2行政法规 3其他
      let value = "";
      if (text === 1) value = "法律";
      if (text === 2) value = "行政法规";
      if (text === 3) value = "其他";
      return {
        children: value,
        attrs: {}
      };
    }
  },
  {
    title: "添加时间",
    key: "createTime",
    dataIndex: "createTime"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

const CHAPTER = {
  isDown: false,
  title: '',
  content: ''
}
export default {
  name: 'laws',
  data () {
    return {
      LAWTYPE,
      APPLICABLETYPE,
      columns,
      lawId: '',
      title: '新增',
      visible: false,
      isClear: false,
      // chapters: [
      //   { ...CHAPTER, id: uuidv4() }
      // ],   //章节
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        lawChapterList: [
          { ...CHAPTER, id: uuidv4() }
        ],
        createTime: "", //添加时间
        applicableType: undefined, //适用类型
        type: undefined, //类别
        title: "" //标题
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" },
        { max: 100, message: "请输入≤100位有效字符", trigger: "change" }],
        type: [{ required: true, message: "请选择类别", trigger: "change" }],
        createTime: [
          { required: true, message: "请选择添加时间", trigger: "change" }
        ],
      },
      // 查询条件参数
      queryParam: {
        applicableType: 1, //适用类型
        type: undefined, //类别
        search: "" //搜索内容
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$axios({
          url: "/law/list",
          cancel: {
            _self: this
          },
          method: "get",
          params: Object.assign(parameter, this.queryParam)
        }).then(res => {
          return {
            data: res.data.lawList,
            totalCount: res.data.total,
            pageNo: res.data.curPage
          };
        });
      }
    };
  },
  components: {
    EditorBar
  },
  methods: {
    onSearch () {
      this.$refs.sTable.refresh(true);
    },
    reset () {
      this.queryParam = {
        applicableType: 1, //适用类型
        type: undefined, //类别
        search: "" //搜索内容
      };
    },
    //创建法律法规
    createLaw () {
      this.visible = true;
      this.title = "新增";
      this.form = {
        lawChapterList: [
          { ...CHAPTER, id: uuidv4() }
        ],
        createTime: "", //添加时间
        applicableType: undefined, //适用类型
        type: undefined, //类别
        title: "" //标题
      }
      this.rules['lawChapterList[0].title'] = [{ required: true, message: "请输入章节标题", trigger: "blur" }]
      this.rules['lawChapterList[0].content'] = [{ required: true, message: "请输入章节内容", trigger: "change" }]
    },
    //修改通知公告
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let method = null
          const data = {
            lawChapterList: this.form.lawChapterList,
            createTime: this.form.createTime,
            applicableType: this.form.applicableType,
            type: this.form.type,
            title: this.form.title,
          }
          if (this.title === '新增') {
            method = 'post'
          } else {
            method = 'put'
            data.id = this.lawId
          }
          this.$axios({
            url: '/law',
            method: method,
            loadingEl: '.ant-modal-content',
            cancel: {
              _self: this
            },
            data: data
          }).then(res => {
            this.$refs.ruleForm.resetFields()
            this.$refs.sTable.refresh()
            this.visible = false;
            this.$message.success(this.title + '成功')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })

    },
    edit (id) {
      this.lawId = id
      this.visible = true;
      this.title = "修改";
      this.$axios({
        url: "/law/chapter/list",
        method: "get",
        loadingEl: '.ant-modal-content',
        cancel: {
          _self: this
        },
        params: {
          id
        }
      }).then(res => {
        let lawChapterList = (res.data.lawChapterList || []).map(list => {
          list.isDown = false
          return list
        })
        this.form = {
          ...res.data,
          lawChapterList
        }
        this.form = res.data
        this.form.lawChapterList.forEach((list, i) => {
          this.rules[`lawChapterList[${i}].title`] = [{ required: true, message: "请输入章节标题", trigger: "blur" }]
          this.rules[`lawChapterList[${i}].content`] = [{ required: true, message: "请输入章节内容", trigger: "change" }]
        })
      });
    },
    //删除法律法规
    deleteLaw (id) {
      this.$axios({
        url: "/law",
        method: "delete",
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          id
        }
      }).then(res => {
        this.$refs.sTable.refresh();
      });
    },
    //新增章节
    addChapter () {
      let id = uuidv4()
      this.form.lawChapterList.push({ ...CHAPTER, id })
      this.form.lawChapterList.forEach((list, i) => {
        this.rules[`lawChapterList[${i}].title`] = [{ required: true, message: "请输入章节标题", trigger: "blur" }]
        this.rules[`lawChapterList[${i}].content`] = [{ required: true, message: "请输入章节内容", trigger: "change" }]
      })
    },
    //删除章节
    deleteChapter (i) {
      if (this.form.lawChapterList.length === 1) return this.$message.warning('至少有一个章节')
      this.form.lawChapterList.splice(i, 1)
    }
  }
}

</script>
<style scoped lang='less'>
.laws {
}
.chapter-item {
  background: rgba(243, 246, 251, 1);
  padding: 10px 0;
  height: 72px;
  overflow: hidden;
  transition: 0.3s;
  &.isDown {
    height: 690px;
  }
  .down {
    position: absolute;
    margin-left: 10px;
    cursor: pointer;
  }
  .minus {
    position: absolute;
    margin-left: 36px;
    cursor: pointer;
  }
}
</style>